5<template>
	<view class="">
		<view class="banner">
			<image src="http://www.auok.ltd/background.jpg" mode="aspectFill"></image>
			<view class="mask">
				<view class="wrap">
					<view class="avatar" @tap='changeAvatar'>
						<image :src="userInfo.avatar" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="nickName">{{userInfo.nickName || userInfo.registerMail}}</view>
						<view class="sign" @tap='toEditSign'>点击编辑个性签名</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="op">
				<view class="op-item" v-for="item in opList" @tap="op(item)">{{item}}
					<view class="right-arrow"></view>
				</view>
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				show: true,
				opList: ['设置', '退出登录', '删除表'],
				touchS: {}

			}
		},
		watch: {

		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['setUserInfo']),
			//改变头像
			changeAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '], //从相册选择
					success: (res) => {
						console.log(res)
						//路径
						let path = res.tempFilePaths[0]
						//类型数组
						// #ifdef H5
						let getType = res.tempFiles[0].name.split('.')
						// #endif
						// #ifdef APP-PLUS
						let getType = res.tempFilePaths[0].split('.')
						// #endif
						//图片后缀名
						let type = getType[getType.length - 1]
						// #ifdef APP-PLUS
						uni.compressImage({
							src: path,
							quality: 60,
							success: res => {
								console.log(res.tempFilePath)
								uniCloud.uploadFile({
									filePath: res.tempFilePath,
									cloudPath: `avatar/${this.$store.state.userInfo._id}.${type}`,
									success: (e) => {
										console.log(e.fileID)
										this.$api.updateAvatar(`?avatar=${e.fileID}`)
											.then(
												res => {
													console.log(res)
												})
									},
									fail(err) {
										console.log('上传失败', err)
									}
								});
							}
						})
						// #endif
						// #ifdef H5
						uniCloud.uploadFile({
							filePath: res.tempFilePaths[0],
							cloudPath: `avatar/${this.$store.state.userInfo._id}.${type}`,
							success: (e) => {
								console.log(e)
								this.$api.updateAvatar({avatarUrl:e.fileID}).then(res => {
									console.log(res)
									if (res.code == 1) {
										this.$getUserInfo()
									} else {
										uni.showToast({
											title: '修改失败',
											icon: 'none'
										})
									}
								})
							},
							fail(err) {
								console.log('上传失败', err)
							}
						});
						// #endif


					}
				})


			},
			toEditSign() {

			},
			blur(e) {
				console.log(this.$refs.sign)

			},
			op(item) {
				if (item == '设置') {
					this.show = false
					uni.navigateTo({
						url: '/pages/setting/setting',
						fail: (err) => {
							console.log(err)
						}
					})
				}
				if (item == '退出登录') {
					uni.reLaunch({
						url: '/pages/selectPage/selectPage?exit=true',
						fail: (err) => {
							console.log(err)
						}
					})
					uni.clearStorage()
				}
				if (item == '删除表') {
					this.$executeSql({
						name: 'chat',
						sql: 'drop table "2061565558@qq.com"'
					}).then(res => {
						console.log(res)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 95%;
		height: 95%;
		// border: 1px solid;
		margin: 20rpx;
	}

	.op {
		margin-top: 80rpx;

		.op-item {
			font-size: 34rpx;
			// border: 1px solid;
			height: 100rpx;
			line-height: 100rpx;
			position: relative;
			margin-left: 15rpx;

			.right-arrow {
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				border-top: 2px solid;
				border-right: 2px solid;
				transform: rotate(45deg);
				top: 50%;
				margin-top: -10rpx;
				right: 20rpx;
			}
		}
	}

	.banner {
		height: 380rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.mask {
			height: 100%;
			width: 100%;
			position: absolute;
			top: 0;
			background-color: rgba(0, 0, 0, .1);

			.wrap {
				display: flex;
				position: absolute;
				bottom: 30rpx;

				.avatar {
					height: 120rpx;
					width: 120rpx;
					border: 2px solid rgba(255, 255, 255, .5);
					border-radius: 50%;
					overflow: hidden;
					margin: 0 25rpx;
				}

				.info {
					// border: 1px solid;
					width: 540rpx;
					height: 120rpx;
					color: #FFFFFF;
					opacity: .8;

					.nickName {
						font-size: 40rpx;
						margin-bottom: 10rpx;

					}
				}
			}
		}
	}
</style>
